<template>
  <div>
    <div class="match-performance-items">
      <div class="performanceClass">赛程</div>
    </div>
    <div class="box-card">
      <el-container>
        <el-header height="57px" class="pass-header">
          <div class="season-selector">
            <el-select
              class="choose-season"
              v-model="season"
              @focus="setMinWidthEmpty"
              style="width:150px"
              placeholder="请选择赛季"
            >
              <el-option
                v-for="item in options"
                :key="item.season"
                :label="item.label"
                :value="item.season"
              >
              </el-option>
            </el-select>
          </div>
          <div class="round-selector">
            <el-select
              class="choose-season"
              v-model="roundIndex"
              @focus="setMinWidthEmpty"
              style="width:150px"
              placeholder="请选择轮次"
            >
              <el-option
                v-for="item in roundsOptions"
                :key="item.round"
                :label="item.label"
                :value="item.round"
              >
              </el-option>
            </el-select>
          </div>
        </el-header>
        <el-main class="pass-main">
          <ScheduleTable :round-battle="newBattles" :round-index="roundIndex" />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ScheduleTable from "./ScheduleTable";
import mixin from "../../../mixin/mixin";
export default {
  name: "Schedule",
  mixins: [mixin],
  data() {
    return {
      //leagueId
      leagueId: 6,
      //当前被选中的轮次号
      roundIndex: 1,
      //当前赛季的所有轮次比赛
      allBattles: [],
      //赛季下拉选择框的配置项
      options: [
        {
          season: "2019赛季",
          label: "2019赛季",
        },
        {
          season: "2018赛季",
          label: "2018赛季",
        },
        {
          season: "2017赛季",
          label: "2017赛季",
        },
        {
          season: "2016赛季",
          label: "2016赛季",
        },
      ],
      //当前选中的赛季
      season: "2019赛季",
    };
  },
  components: {
    ScheduleTable,
  },
  watch: {
    season: {
      handler(newSeason) {
        const seasonId = parseInt(newSeason);
        this.$emit("changeLeagueSeason", seasonId);
        //监听season的改变，获取对应赛季的数据
        this.getRoundOfSeason(seasonId);
      },
      immediate: true,
    },
  },
  methods: {
    //获取当前赛季的所有轮次信息
    async getRoundOfSeason(seasonId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/aboutmatches/matchlist/6/${seasonId}`
      );
      console.log();
      console.log("轮次数据");
      this.allBattles = data;
    },
    //进入比赛
    enterMatch(matchId) {
      console.log(matchId);
    },
  },
  computed: {
    //根据用户点击的轮次 过滤 获得对应轮次的比赛
    newBattles() {
      return this.allBattles.filter((round) => {
        return round.round === this.roundIndex;
      });
    },
    //轮次下拉选择框的配置项
    roundsOptions() {
      const rounds = [];
      for (let i = 1; i < 31; i++) {
        let singleRound = {};
        singleRound.round = i;
        singleRound.label = `第${i}轮`;
        rounds.push(singleRound);
      }
      return rounds;
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
.match-performance-items {
  display: flex;
  justify-content: flex-start;
  width: 1440px;
  height: 56px;
  margin: 40px auto 0;
  /*background-color: red;*/
}
.performanceClass {
  color: #16c79a;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 132px;
  height: 100%;
  background-color: #194568;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
  div {
    margin-right: 10px;
  }
}
.pass-main {
  height: 496px;
  padding: 0;
  background-color: #f1f6f9;
}
</style>
